<template>
  <div class="tabbar">
    <template v-for="item in tabbars" :key="item.name">
      <div class="item">
        <!-- <router-link :to="item.path"> -->
          <img class="icon" :src="getImgUrl(item.icon)" alt="">
          <span class="text">{{ item.name }}</span>
        <!-- </router-link> -->
      </div>
    </template>
    <!-- <router-link to="/favor">收藏</router-link>
    <router-link to="/order">订单</router-link>
    <router-link to="/message">消息</router-link> -->
  </div>
</template>
<script setup>
import { getImgUrl } from '@/utils/load_image';


const tabbars = [
  {
    name: '首页',
    icon: 'tabbar/tab_home.png',
    selectedIcon: 'tabbar/tab_home_active.png',
    path: '/home'
  }, {
    name: '收藏',
    icon: 'tabbar/tab_favor.png',
    selectedIcon: 'tabbar/tab_favor_active.png',
    path: '/favor'
  }, {
    name: '订单',
    icon: 'tabbar/tab_order.png',
    selectedIcon: 'tabbar/tab_order_active.png',
    path: '/order'
  }, {
    name: '消息',
    icon: 'tabbar/tab_message.png',
    selectedIcon: 'tabbar/tab_message_active.png',
    path: '/message'
  }
]
</script>
<style lang="less" scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  display: flex;
  height: 50px;
  width: 100%;
  border-top: 1px solid #f3f3f3;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon {
      width: 34px;
    }
    .text {
      font-size: 12px;
    }
  }
}
</style>
